<template>
    <div class="home-header">
        <div class="home-header-left">
            <span class="iconfont home-ico-leave">&#xe624;</span>
        </div>
        <div class="home-header-input">
            <span class="iconfont home-ico-search">&#xe632;</span>输入城市/景点/游玩内容</div>
        <router-link to= "/city">
            <div class="home-header-right">
                {{this.city}}<span class="iconfont home-ico-list">&#xe64a;</span>
            </div>
        </router-link>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name: 'home-header',
    computed: {
        //将vuex的state中的city属性以city的名字映射到计算属性中
        ...mapState(['city'])
    }
}
</script>

<style lang= "stylus" scoped>
@import '../../../assets/styles/varibles.styl';/* 不能写在url中 */
*
    box-sizing border-box
    padding 0
    margin 0
    .home-header
        line-height $headerHeight
        height $headerHeight
        display flex
        background $bgColor
        color #fff
        .home-header-left
            width .64rem
            float left
            .home-ico-leave
                display block
                padding-left .2rem
                font-size .4rem
        .home-header-input
            flex 1
            /* 设置flex使元素铺满，左右元素按内容确定长度 */
            background #fff
            color #ccc
            line-height .62rem
            border-radius .2rem
            height .62rem
            margin-top .12rem
            margin-bottom .12rem
            margin-left .2rem
            .home-ico-search
                margin-left .2rem
        .home-header-right
            padding-left .1rem
            float right
            color #fff
            text-align center
            .home-ico-list
                font-size .25rem
                padding-left .1rem
</style>
